<template>
  <div class="shoucan">
    <van-nav-bar
      title="收藏"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 收藏无数据 -->
    <div
      class="nodata"
      v-if="datalist.length>0"
    >
      <div class="number">
        <p class="p1">当前共<span class="num">{{datalist.length}}</span>件商品 <span
            class="p1-right-span"
            style="float:right; margin-right:10px"
            @click="change"
          >{{flag?"取消":"管理"}}</span></p>
      </div>

      <div
        v-for="item in datalist"
        :key="item.id"
      >
        <div class="check">
          <van-checkbox
            @click="get(item)"
            v-show="flag"
            v-model="checked"
          ></van-checkbox>
          <!-- @click="get(item)" -->
        </div>
        <van-card
          :title="item.storeName"
          :thumb="item.image"
        >

          <template #price>
            <p class="p2">
              ￥{{item.price}}
            </p>
          </template>
        </van-card>
      </div>

      <div v-show="flag">
        <van-submit-bar
          button-text="删除收藏"
          @submit="onSubmit"
        >
          <van-checkbox
            style="margin-right:50%"
            v-model="checked"
          >全选</van-checkbox>

        </van-submit-bar>
      </div>
    </div>

    <div v-else>
      <van-empty
        image="error"
        description="请收藏商品"
      />

      <van-divider>热门推荐</van-divider>
    </div>

  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      authoriZation: localStorage.token,
      // 收藏数据
      datalist: [],
      flag: false,
      checked: false,
    };
  },
  methods: {
    // 获取收藏
    async getCollection() {
      const res = await this.$http.getshoucang({
        authoriZation: this.authoriZation,
      });
      console.log(res.data.data.list);
      this.datalist = res.data.data.list;
      this.datalist.forEach((item) => {
        item.che = false;
      });
      console.log(this.datalist);
    },
    onClickLeft() {
      Toast("返回");
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("按钮");
    },
    change() {
      this.flag = !this.flag;
    },
    // 提交删除收藏内容
    onSubmit() {},
    // 获取点击复选框那一条的数据
    get(item) {
      // item.che=!item.che
      console.log(item.che);
      // console.log(item);
    },
    // 点击全选
    getall() {
      this.datalist.forEach((item) => {
        item.che = true;
      });
      console.log(this.datalist);
      this.checked = true;
    },
  },
  created() {
    this.getCollection();
  },
};
</script>
<style lang="scss">
.shoucan {
  .van-card {
    width: 90%;
    margin: 0px auto;
    border-radius: 15px;
    border: 1px solid #ddd;
  }
  .number {
    width: 90%;

    margin: 0px auto;
    margin-top: 0px;
    border: 1px solid #ddd;
    border-radius: 15px;
  }
  .p2 {
    color: red;
  }
  .num {
    color: red;
  }

  .check {
    .van-checkbox__icon {
      float: left;
      position: absolute;
      padding-top: 25%;
    }
  }
}
</style>